<template>
	<view>


		<view class="display">
			<view class="left" :style="{height:windowHeight+'rpx'}">
				<block v-for="(item,index) in serviceList" :key="index">
					<view @click="selLeft(index,item.id)" :class="leftIndex == item.id ? 'sel-left' : 'no-sel-left'">
						{{item.classificationName}}
					</view>
				</block>
			</view>
			<view class="right">
				<block v-if="list.length > 0">
					<view class="display-fw-js padding_0_30rpx">
						<block v-for="(item,index) in packageList" :key="index">
							<image :src="item.rotationChart"></image>
							<view class="remaining-width m-left20">
								<view class="font32 color333">{{item.tradeName}}</view>
								<view class="font-overflow color999 p-align-top10">
								</view>
								<view class="flex-align-center">

									<view class="bj-time golden  flex-align-center">
										<text class="font24 iconfont icon-shijian m-right10"></text>
										<view class="font24 m-bottom4">{{item.serviceTime}}分钟</view>
									</view>
								</view>
								<view class="flex-between p-top20">
									<view class="flex-align-center">
										<text class="font36 red">￥{{item.plusClockPrice}}</text>
										<view class="font24 color999 text-decoration ">￥{{item.originalServicePrice}}
										</view>
									</view>
								</view>
								<view>
								</view>
							</view>
						</block>
					</view>
				</block>
				<mescroll-empty v-else></mescroll-empty>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

				imgUrl: this.$imgUrl,

				system: uni.getStorageSync("system"),

				name: '',

				cateList: [],
				leftIndex: '',

				list: [],

				windowHeight: '',
				serviceList: [],
				selectServiceList: [],
				// 套餐列表
				packageList: [],
				categories: ''
			}
		},

		onLoad(options) {

			this.getServiceCategories();
			this.getByTechnicianCategory()

		},

		onShow() {


		},

		methods: {

			// 查询类目
			async getServiceCategories() {
				const result = await this.$http.get({
					url: this.$api.getByServiceCategoriesSiteId,
					data: {
						siteId: uni.getStorageSync('siteId') // 站点id
						// siteId: this.siteId // 站点id 
					}
				});
				if (result.code == 200) {
					console.log('查询类目result.', result);
					this.serviceList = result.data;

				} else {
					this.$sun.toast(result.message)
				}
			},

			async getByTechnicianCategory() {
				const res = await this.$http.get({
					url: this.$api.getSelectClassificationQueryPackage,
					data: {
						// siteId: uni.getStorageSync('siteId'), // 站点id
						// serviceCategoriesId: id
						technicianId: uni.getStorageSync('technicianId')
					}
				});
				console.log(res.data)
			},
			async getShopList(id) {
				const result = await this.$http.get({
					url: this.$api.queryPackage,
					data: {
						serviceCategoriesId: id // 站点域名(传值将https截取)
					}
				});
				if (result.code == 200) {
					this.packageList = result.data;
				}

			},

			confirmChange(e) {
				this.name = e.detail.value;

			},

			selLeft(index, id) {
				this.categories = id;
				this.getShopList(id);
			},
		}
	}
</script>

<style lang="scss">
	.shop-name {
		height: 80rpx;
		margin-bottom: 8rpx;
		font-size: 32rpx;
	}

	.shop-img {
		width: 240rpx;
		height: 240rpx;
		border-radius: 10rpx;
	}

	.version {
		width: 240rpx;
	}

	.index-54 {
		width: 138rpx;
		height: 138rpx;
		position: absolute;
		z-index: 99;
		// left: 93rpx;
		// top: 93rpx;
	}

	.frame {
		width: 240rpx;
		height: 240rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		position: relative;
	}

	.right {
		width: 580rpx;
		padding: 20rpx 0 10rpx;
	}

	.no-sel-left {
		text-align: center;
		padding: 26rpx 10rpx;
		color: #757575;
	}

	.sel-left {
		background-color: #36BFC5;
		text-align: center;
		padding: 30rpx 10rpx;
		color: #FFFFFF;
	}

	.left {
		width: 170rpx;
		background-color: #f7f7f7;
	}

	page {
		background-color: #FFFFFF;
		padding-top: 20rpx;
	}

	.search {
		width: 700rpx;
		background-color: #F7F7F7;
		padding: 16rpx 20rpx;
		border-radius: 100rpx;
		margin: 0 25rpx 20rpx;

		>input {
			width: 520rpx;
			height: 48rpx;
			margin-left: 20rpx;
		}
	}
</style>